<template>
  <div class="setting-container">
    <el-card>
      <el-tabs v-model="activeName">
        <el-tab-pane label="用户管理" name="first">
          <el-button type="primary" @click="add">+新增角色</el-button>

          <!-- 表格 -->
          <el-table :data="tableData" style="width: 100%">
            <el-table-column label="序号" type="index" width="50" />
            <!-- <el-table-column label="序号" width="180">
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column> -->
            <el-table-column label="角色名称" prop="name" />
            <el-table-column label="描述" prop="description" />
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="success"
                  @click="rightHandle(scope.row)"
                  >分配权限</el-button
                >
                <el-button size="mini" type="primary" @click="edit(scope.row)"
                  >编辑</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="roleObj.page"
            :page-sizes="[2, 4, 6, 8, 10]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="公司信息" name="second">
          <el-form
            ref="form"
            style="width: 40%"
            :model="formInfo"
            label-width="80px"
          >
            <el-form-item label="企业名称">
              <el-input v-model="formInfo.name" :disabled="true" />
            </el-form-item>
            <el-form-item label="公司地址">
              <el-input v-model="formInfo.companyAddress" disabled />
            </el-form-item>
            <el-form-item label="公司电话">
              <el-input v-model="formInfo.companyPhone" disabled />
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="formInfo.mailbox" disabled />
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="formInfo.name" disabled />
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 对话框 -->
    <el-dialog
      @close="closeHandle"
      title="提示"
      :visible.sync="dialogVisibleRole"
      width="30%"
    >
      <setDialog
        v-if="dialogVisibleRole"
        :isEdit="isEdit"
        :row="row"
        ref="setDia"
        @success="success"
      />
    </el-dialog>

    <!-- 分配权限 -->
    <el-dialog
      @close="closeHandle2"
      title="分配权限"
      :visible.sync="dialogVisiblePer"
      width="30%"
    >
      <assignPermission
        v-if="dialogVisiblePer"
        :role-id="roleId"
        @success2="success2"
      />
    </el-dialog>
  </div>
</template>

<script>
import setDialog from './setDialog.vue'
import assignPermission from './assignPermission.vue'
import { getRoles, getCompanyInfo } from '@/api/setting.js'
export default {
  name: '',
  components: {
    setDialog,
    assignPermission
  },
  data() {
    return {
      activeName: 'first',
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ],
      roleObj: {
        page: 1,
        pagesize: 2
      },
      total: 1,
      dialogVisibleRole: false,
      row: {},
      isEdit: false,
      formInfo: {
        name: ''
      },
      // 分配权限
      dialogVisiblePer: false,
      roleId: ''
    }
  },
  computed: {},
  created() {
    // 获取角色列表
    this.getRoleHandle()
    // 获取公司信息
    this.getInfo()
    // console.log(this.$store.state.user.userInfo.companyId)
  },
  methods: {
    handleDelete(index, row) {
      console.log(index, row)
    },
    // 获取公司角色列表
    async getRoleHandle() {
      // 步骤分析
      // 1-封装api接口函数
      // 2-引入调用api函数
      // 3-获取数据===将数据展示到表单中
      const {
        data: { rows, total }
      } = await getRoles(this.roleObj)
      console.log(`rows`, rows)
      this.tableData = rows
      this.total = total
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.roleObj.pagesize = val
      this.getRoleHandle()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.roleObj.page = val
      this.getRoleHandle()
    },
    add() {
      // 添加角色按钮
      // 步骤分析
      // 1-点击按钮
      // 2-显示对话框
      // 3-对话框页面结构布局
      // 4-校验-兜底校验
      // 5-点击对话框确认按钮
      //  5-1 封装api接口函数
      //  5-2调用api接口函数
      //  5-3成功:关闭对话框 刷新页面 清空表单数据
      this.dialogVisibleRole = true
      this.isEdit = false // 需要判断到底点击的是添加还是按钮 isEdit
    },
    // 添加角色成功后的回调
    success() {
      // 关闭对话框 + 刷新页面 + 清空表单数据
      this.dialogVisibleRole = false
      this.getRoleHandle()
      this.$refs.setDia.close() // this.$refs.setDia获取子组件中的this
    },
    edit(row) {
      this.row = row
      console.log(row, 777)
      // 步骤分析
      // 1-点击按钮获取当前行的数据
      // 2-显示对话框
      // 3-编辑和添加共用一个对话框
      //  3-1 需要判断到底点击的是添加还是按钮 isEdit
      // 3-2 编辑:将数据展示到表单中
      //  3-2-1 父组件向子组件传值
      //  3-2-2 子组件如何接收传递过来的值:watch
      // 3-3 添加:不需要展示数据
      // 4-点击对话框中的确认按钮
      //  4-1 发送请求===判断是发送添加还是编辑的请求
      //  4-2 编辑请求:
      //  4-2-1 封装api
      //  4-2-2 调用api
      //  4-2-3 成功后: 关闭对话框 + 刷新页面 + 清空表单数据
      this.dialogVisibleRole = true
      this.isEdit = true // 需要判断到底点击的是添加还是按钮 isEdit
    },
    closeHandle() {
      // 关闭对话框就触发
      this.$refs.setDia.close()
    },
    async getInfo() {
      const res = await getCompanyInfo(
        this.$store.state.user.userInfo.companyId
      )
      console.log(`res123`, res)
      this.formInfo = res.data
    },
    // 分配权限
    rightHandle(row) {
      /*
      步骤分析
      1-点击分配权限按钮==显示对话框
      2-获取所有的权限
      3-获取当前角色所拥有的权限并展示出来
      4-给角色分配权限
        4-1 点击确认按钮
        4-2 获取给角色分配的权限集合===就是复选框所选中的
        4-3 封装api接口函数
        4-4 调用api接口函数
        4-5 成功后 关闭对话框====需要数据清空
      */
      (this.dialogVisiblePer = true), (this.roleId = row.id)
    },
    closeHandle2() {},
    success2() {
      this.dialogVisiblePer = false
    }
  }
}
</script>
<style lang='scss'  scoped>
.setting-container {
  padding: 30px;
}
</style>